<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane v-for="type in appTypes" :key="type.appTypeId" :label="type.typeName" :name="type.appTypeId"></el-tab-pane>
        </el-tabs>
        <div class="app-blocks">
          <el-card v-for="app in apps" :key="app.appId" class="app-block" :body-style="{ padding: '20px' }" @click="goToApp(app)">
            <img :src="app.logoUrl" alt="logo" class="app-logo" />
            <h3>{{ app.appName }}</h3>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref, onMounted } from 'vue';
import { getRedirectUri, listUserApp } from '@/api/application/application';
import { listAppType } from '@/api/application/appType';

const apps = ref([]);
const appTypes = ref([]);
const activeTab = ref('all');

const getList = async (typeId = null) => {
  const res = await listUserApp(typeId ? typeId : '');
  if (res.code === 200) {
    apps.value = res.data;
  }
};

const getAppTypes = async () => {
  const res = await listAppType();
  if (res.code === 200) {
    appTypes.value = res.rows;
  }
};

const goToApp = async (app) => {
  // 获取跳转地址
  const res = await getRedirectUri(app.appId);
  window.open(res.data, '_blank');
};

const handleTabClick = (tab) => {
  const typeId = tab.props.name === 'all' ? null : tab.props.name;
  getList(typeId);
};

onMounted(() => {
  getAppTypes();
  getList();
});
</script>

<style lang="scss" scoped>
.app-container {
  .app-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .app-block {
    cursor: pointer;
    width: 250px;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    transition:
      box-shadow 0.3s,
      transform 0.3s;

    &:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      transform: translateY(-5px);
    }

    .app-logo {
      width: 100%;
      height: 80px;
      object-fit: cover;
      border-bottom: 1px solid #ebeef5;
    }

    h3 {
      margin: 10px 0;
      font-size: 18px;
      text-align: center;
    }

    p {
      font-size: 14px;
      color: #606266;
      text-align: center;
    }

    .app-type {
      display: block;
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>
